<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- 1. compiler 让.vue中的template生成对应的render函数(h函数)，暂时 不做 -->

    <!-- 2. runtime 让生成的render函数产生对应的dom ， 并通过mount挂载到别的dom中 ，更新dom（没加入diff） -->
    <script src="./render.js"></script>

    <script>
      const vnode = h("div", { class: "testRuntime mytest" }, [
        h("h3", null, "由我来组成header"),
        h(
          "button",
          {
            onclick: function (e) {
              console.log(e);
            },
          },
          "我是 content ,点击打印信息"
        ),
        h("h3", null, "由我来组成尾部"),
      ]);
      console.log(vnode);

      mount(vnode, document.querySelector("#app"));

      //   更新dom ，通过patch(vnode1,vnode2) , 对比更新vnode1.el
      const vnode2 = h("div", { class: "testRuntimeNext testRuntime" }, [
        h("h1", null, "由我来组成header,second"),
        h(
          "div",
          {
            onclick: function (e) {
              console.log(e);
            },
            height: "100px",
            width: "100px",
          },
          "我是 content ,点击打印信息"
        ),
        h("h3", null, "由我来组成尾部,second"),
      ]);
      //   const vnode2 = h("div", null, "1234");
      console.log(vnode2);

      setTimeout(() => {
        patch(vnode, vnode2);
      }, 1000);
    </script>
  </body>
</html>
